<template>
	<ui-sys img="../../static/question/explanationTop.png">
		<ui-navbar back opacity>
			<view class="p-2 flex-bar flex-sub" v-if="sys_scrollTop > sys_navBar">
				<text class="text-lg cicon-back  " @tap="navigateBack()">返回</text>
			</view>
			<view class="p-2 flex-bar flex-sub" v-else>
				<text class="text-lg cicon-back  text-white" @tap="navigateBack()"></text>
			</view>
			<view class="flex-bar">
				<!-- #ifdef MP -->
				<view :style="{width:`${sys_capsule.width + 10}px`,height:`${sys_capsule.height}px`}">
					<view> 12</view>
				</view>
				<!-- #endif -->
			</view>
		</ui-navbar>
		<view class="explanationBox">
			<view class="title">{{ explanation.questionMiniVO&&explanation.questionMiniVO.title }}</view>
			<view class="card">
				<!-- 用户信息 -->
			 <view class="user" v-if="explanation.userVO">
					<image :src="explanation.userVO.avatarUrl" class="headPicture"></image>
					<view class="uerContent">
						<view class="nickName">{{ explanation.userVO.nickName }}</view>
						<view class="authentication">{{ explanation.userVO.slogan }}</view>
					</view>
				</view>
				<view class="content">
					<robin-editor :value="explanation.content" :header="false" previewMode></robin-editor>
				</view>
			</view>

			<!-- 操作栏 -->
			<view class="bottom" v-if="sys_scrollTop <= sys_navBar">
				<!-- 写题解 -->
				<template v-if="!explanationIDBySelf">
					<button class="ui-btn block bg-blue shadow shadow-blue"
						@click="toWirteQuestion(explanation.questionMiniVO.qid,explanation.userVO.uid)">写题解</button>
				</template>
				<!-- 查看自己的题解 -->
				<template v-else>
					<button class="ui-btn block bg-blue shadow shadow-blue"
						@click="toWirteQuestion(explanation.questionMiniVO.qid,explanation.userVO.uid, explanation.eid)">查看自己的题解</button>
				</template>
			</view>
		</view>
	</ui-sys>
</template>

<script>
	import {
		userInfoRequest
	} from '@/api/login.js';

	import {
		explainByEidRequest,
	} from '@/api/question.js'
	import {
		getStorageUserInfo
	} from '@/utils/storageUtils.js';

	export default {
		data() {
			return {
				loginnedUserInfo: {},
				// 是否是自己的题解
				explanationIDBySelf: true,
				explanation: {
					_id: 1,
					title: '1.21 Java集合体系有什么？(必会)',
					content: 'kkkkkkkkkkkkkkkkkkk'
				}

			};
		},
		onLoad(params) {
			this.getExplanation(params.eid)
			this.loginnedUserInfo = getStorageUserInfo()
		},
		methods: {
			getExplanation(eid) {
				const param = {
					eid
				}
				explainByEidRequest(param).then(res => {
					if (res.code == 200) {
						this.explanation = res.data
						this.explanationIDBySelf = this.loginnedUserInfo.uid === res.data.userVO.uid
					} else {
						this.$Tips(res.msg);
					}
				})
			},
			// 区修改题解或 添加题解
			toWirteQuestion(qid, uid, eid='') {
				uni.navigateTo({
					url: `/pages/question/writeQuestion?qid=${qid}&eid=${eid}&uid=${uid}&explanationIDBySelf=${this.explanationIDBySelf}`,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			// 返回
			navigateBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	@import "../../utils/common.scss";

	.explanationBox {
		.title {
			width: 90%;
			min-height: 58rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			color: #fff;
			font-size: 32rpx;
			margin-top: 50rpx;
			@include text-ellipsis(2);
		}

		.card {
			width: 96%;
			min-height: 978rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 8px;
			overflow: hidden;
			padding-bottom: 30rpx;

			.user {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 32rpx;
				margin-top: 30rpx;

				.headPicture {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.uerContent {
					margin-left: 24rpx;

					.nickName {
						max-width: 400rpx;
						@include text-ellipsis;
						font-size: 28rpx;
						color: #5454a1;
					}

					.authentication {
						font-size: 20rpx;
						color: #ffac61;
					}
				}
			}

			.content {
				width: 614rpx;
				margin: 0 auto;
				margin-top: 40rpx;
			}
		}

		.bottom {
			width: 690rpx;
			height: 98rpx;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			align-items: center;

		}
	}
</style>
